<script setup lang="ts">
import { reactive } from "vue";
import { useRouter } from "vue-router";

defineOptions({
  name: "Welcome"
});

const router = useRouter();
const modules: Record<string, any> = import.meta.glob(
  ["/src/router/modules/**/*.ts", "!/src/router/modules/**/remaining.ts"],
  { eager: true }
);

const routeList = reactive(
  Object.values(modules)
    .map(item => item.default)
    .filter(item => item?.meta?.showLink)
    .sort((a, b) => a?.meta?.rank - b?.meta?.rank)
    .map(item => ({
      path: item.path,
      title: item?.meta?.title
    }))
);

const toRoute = function (item) {
  router.push(item.path);
};
</script>

<template>
  <div class="welcome-page">
    <div class="list-container">
      <div
        v-for="item in routeList"
        :key="item.path"
        class="item"
        @click="toRoute(item)"
      >
        {{ item.title }}
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.welcome-page {
  height: calc(100vh - 48px);
  margin: 0 !important;
  background: #b1e4ff url("@/assets/images/parrot-bg.jpg") no-repeat bottom /
    cover;
  user-select: none;

  .list-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 100px;
    grid-auto-rows: 100px;
    grid-gap: 15px;
    padding: 15px;

    .item {
      font-size: 16px;
      color: #333;
      background: rgba(255, 255, 255, 0.3);
      cursor: pointer;
      border-radius: 3px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

@keyframes show {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@media screen and (max-width: 520px) {
  .welcome-page {
    background-size: contain;

    .list-container {
      grid-template-columns: 1fr;
    }
  }
}
</style>
